<template>
  <div class="health-dashboard">
    <el-row :gutter="20">
      <!-- 走步卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="health-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon" :size="20" color="#1890ff">
                <User />
              </el-icon>
              <span class="header-title">走步（步）</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="3019" class="main-value" />
            <el-text type="info" class="sub-text">距离达成目标还差 4981步</el-text>
          </div>
        </el-card>
      </el-col>

      <!-- 体重卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="health-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon" :size="20" color="#67c23a">
                <User/>
              </el-icon>
              <span class="header-title">体重</span>
              <el-text type="info" size="small" class="time-text">2020-02-14 15:32</el-text>
            </div>
          </template>
          <div class="card-content">
            <el-row :gutter="16">
              <el-col :span="12">
                <div class="value-item">
                  <el-text type="info" size="small">体重（kg）</el-text>
                  <el-statistic :value="73.1" class="item-value" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="value-item">
                  <el-text type="info" size="small">体脂</el-text>
                  <el-statistic :value="21.4" suffix="%" class="item-value" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <!-- 睡眠卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="health-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon" :size="20" color="#e6a23c">
                <Moon />
              </el-icon>
              <span class="header-title">睡眠</span>
              <el-text type="info" size="small" class="time-text">2020-02-14</el-text>
            </div>
          </template>
          <div class="card-content">
            <el-statistic value="8:25" prefix=" " class="main-value" />
            <el-descriptions :column="1" size="small">
              <el-descriptions-item label="深睡">3小时30分</el-descriptions-item>
              <el-descriptions-item label="清醒">20分</el-descriptions-item>
              <el-descriptions-item label="浅睡">4小时30分</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>

      <!-- 心率卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="health-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon" :size="20" color="#f56c6c">
                <Opportunity />
              </el-icon>
              <span class="header-title">心率</span>
              <el-text type="info" size="small" class="time-text">2019-09-12 16:43</el-text>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="72" suffix="次/分钟" class="main-value" />
            <el-tag type="success" effect="light">心率正常</el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 血氧卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="health-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon" :size="20" color="#909399">
                <Sunny />
              </el-icon>
              <span class="header-title">血氧饱和度</span>
              <el-text type="info" size="small" class="time-text">2019-09-12 16:43</el-text>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="98" suffix="%" class="main-value" />
            <el-tag type="success" effect="light">正常</el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 体温卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="health-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon" :size="20" color="#e6a23c">
                <Sunny />
              </el-icon>
              <span class="header-title">体温</span>
              <el-text type="info" size="small" class="time-text">记录时间 2019-09-12 16:43</el-text>
            </div>
          </template>
          <div class="card-content">
            <el-descriptions :column="1" size="small">
              <el-descriptions-item label="测量值（℃）">
                <el-statistic :value="36.6" />
              </el-descriptions-item>
              <el-descriptions-item label="正常值（℃）">36~37</el-descriptions-item>
            </el-descriptions>
            <el-tag type="success" effect="light">正常</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  User,
  Moon,
  Opportunity,
  Sunny
} from '@element-plus/icons-vue'
</script>

<style scoped>
.health-dashboard {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.health-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  padding: 4px;
  background: #f0f2f5;
  border-radius: 4px;
}

.header-title {
  font-weight: bold;
  color: #303133;
}

.time-text {
  margin-left: auto;
}

.card-content {
  text-align: center;
  padding: 8px 0;
}

.main-value {
  margin-bottom: 12px;
}

.sub-text {
  display: block;
  margin-top: 8px;
}

.value-item {
  text-align: center;
}

.item-value {
  margin-top: 4px;
}

:deep(.el-descriptions__label) {
  width: 80px;
  text-align: right;
}
</style>